<!--
这个文件定义了一个名为 `Aside` 的 Vue 组件，用于显示侧边栏菜单。
组件包含以下部分：
- template: 包含侧边栏的结构和样式：
  - `aside_top`: 显示应用的 logo 文本 "ICVN"。
  - `aside_menu`: 使用 `el-menu` 组件渲染菜单项，默认选中当前路由对应的菜单项。
    - `el-menu-item`: 遍历 `menuItems` 数组生成菜单项，点击菜单项时调用 `handleMenuClick` 方法。
    - `router-link`: 用于导航，绑定到菜单项的链接，显示菜单项的图标和名称。
- script setup: 使用 Vue 3 的 `<script setup>` 语法，定义了以下内容：
  - `menuItems`: 一个包含菜单项信息的响应式数组，每个菜单项包含名称、链接和图标。
  - `currentRoute`: 获取当前路由信息。
  - `router`: 获取路由实例，用于导航。
  - `handleMenuClick`: 一个方法，用于处理菜单项点击事件。
-->

<template>
    <div id="aside">
        <div id="aside_top">
            <span class="logo-text">ICVN</span>
        </div>
        <div id="aside_menu">
            <el-menu :default-active="currentRoute.path">
                <el-menu-item v-for="item in menuItems" :key="item.name" :index="item.link"
                    @click="handleMenuClick(item)">
                    <router-link class="menuItem" :to="item.link" active-class="active-menu-item">
                        <component :is="item.icon" class="menu-icon" />
                        <span class="menu-name">{{ item.name }}</span>
                    </router-link>
                </el-menu-item>
            </el-menu>
        </div>
    </div>
</template>

<script setup>
import { ref, markRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { HomeFilled, InfoFilled } from '@element-plus/icons-vue'
import { useTabStore } from '@/stores/tabStore.js'

// 使用 markRaw 将图标组件标记为原始对象
const menuItems = ref([
    { name: '控制台', link: '/Admin/Desktop', icon: markRaw(HomeFilled) },
    { name: '用户管理', link: '/Admin/UserInfo', icon: markRaw(InfoFilled) },
    { name: '奖项管理', link: '/Admin/AwardInfo', icon: markRaw(InfoFilled) }
])

const currentRoute = useRoute()
const router = useRouter()
const tabStore = useTabStore()

const handleMenuClick = (item) => {
    tabStore.addTab(item)
    router.push(item.link)
}
</script>

<style scoped>
#aside_top {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background-color: #409EFF;
}

#aside {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 260px;
}

.logo-text {
    line-height: 40px;
    color: #fff;
    font-size: 32px;
    font-weight: bold;
}

#aside_menu {
    flex: 1;
    overflow-y: auto;
}

.menuItem {
    text-decoration: none;
    display: flex;
    align-items: center;
}

.menu-icon {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}

.active-menu-item {
    font-weight: bold;
    color: #409EFF;
}
</style>